@use "../../../vars";

.playlist_outside_container {
	width: 50%;
}

.playlist_container {
	display: flex;
	flex-flow: row;
	margin: 0.5rem;
	background: rgba(vars.$background2, 0.5);
	cursor: pointer;
	border-radius: 0.25rem;
	justify-content: flex-start;
	align-items: center;
	padding: 0.5em;

	.playlist_thumbnail_container {
		display: flex;
		align-items: center;
	}

	.playlist_thumbnail {
		width: 64px;
		height: 64px;
	}
}

.playlist_title {
	font-size: 1.3rem;
	margin-bottom: 0.5rem;
}

.playlist_info {
	display: flex;
	flex-flow: column;
	flex: 1 1 auto;
	padding-left: 1rem;

	h1,
	h2,
	h3 {
		margin: 0;
	}
}

.playlist_chevron {
	display: flex;
	flex-flow: column;
	justify-content: center;
	padding: 0.5rem;
}
